<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件生命周期</title>
</head>
<body>
<div id="test"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*告诉babel.js解析里面的jsx的代码*/
class Hello extends React.Component{
    constructor(props) {
        super(props);
        this.state = {opacity: 1.0};
    }

    componentDidMount(){
        this.timer = setInterval(function () {
            var opacity = this.state.opacity;
            opacity -= .05;
            if (opacity < 0.1) {
                opacity = 1.0;
            }
            this.setState({
                opacity: opacity
            });
        }.bind(this),100);

    }
    //两个大括号用处不一样，第一个外部{}表示里面是js代码，第二个内部{}表示js的对象
    render () {
        return (
                <div style={{opacity: this.state.opacity}}>
                    Hello {this.props.name}
                </div>
        );
    }
}

//Content的父组件，负责点击事件和状态值
class Button extends React.Component {
    constructor(props) {
        super(props);
        this.state = {data: 0};
        this.setNewNumber = this.setNewNumber.bind(this);
    }

    setNewNumber() {
        this.setState({data: this.state.data + 1})
    }
    render() {
        return (
                <div>
                    <button onClick = {this.setNewNumber}>INCREMENT</button>
                    <Content myNumber = {this.state.data}></Content>
                </div>
        );
    }
}

//子组件，打印各种状态，负责展示数量
class Content extends React.Component {
    //执行一次
    componentWillMount() {
        console.log('Component WILL MOUNT!')
    }
    //执行一次
    componentDidMount() {
        console.log('Component DID MOUNT!')
    }

    componentWillReceiveProps(newProps) {
        console.log('Component WILL RECEIVE PROPS!')
    }
    shouldComponentUpdate(newProps, newState) {
        return true;
    }
    componentWillUpdate(nextProps, nextState) {
        console.log('Component WILL UPDATE!');
    }
    componentDidUpdate(prevProps, prevState) {
        console.log('Component DID UPDATE!')
    }
    //不执行
    componentWillUnmount() {
        console.log('Component WILL UNMOUNT!')
    }

    render() {
        return (
                <div>
                    <h3>{this.props.myNumber}</h3>
                </div>
        );
    }
}


// 2. 将虚拟DOM渲染到页面真实DOM容器中
//ReactDOM.render(<Hello name="菡萏如佳人"/>, document.getElementById('test'))

ReactDOM.render(<div> <Button /></div>, document.getElementById('test'))

</script>
</body>
</html>